<template>
    <div class="kebiao-box">
        <el-card>
            <table  border="0" cellspacing="0" cellpadding="8">
                <!-- 表头 -->
                <tr style="background:#C2DFFE;font-weight:bold;">
                    <td style="border:none;margin:0;"></td>
                    <td v-for="item in headerList" :key="item.index">
                        {{item.num}}
                    </td>
                    <td>
                        <el-button type="primary" @click="handleAdd" size="small">添加</el-button>
                    </td>
                </tr>
                <!-- 时间段 -->
                <tr style="height:60px;">
                    <td></td>
                    <td v-for="item in headerList" :key="item.index">
                            {{item.time[0]}}-{{item.time[1]}}
                    </td>
                    <td></td>
                </tr>
                <!-- 星期几 -->
                <tr v-for="item in rowList" :key="item.index">
                    <td>{{item.name}}</td>
                    <!-- 一天课程 -->
                    <td v-for="el in item.list" :key="el.index" >
                        <span v-if="!item.show">{{el.subName}}</span>
                        <el-select  v-else style="width:100px;" v-model="el.value" size="small">
                            <el-option v-for="item in subjectList" :key="item.index" :label="item.subName" :value="item.value"></el-option>
                        </el-select>
                    </td>
                    <td style="width:140px;">
                        <el-button type="primary" @click="handleEdit(item)" size="small" v-if="!item.show">编辑</el-button>
                        <el-button type="success" @click="handleOk(item)" size="small" v-if="item.show">确定</el-button>
                        <el-button type="default" @click="handleEdit(item)" size="small" v-if="item.show">取消</el-button>
                    </td>
                </tr>
            </table>
        </el-card>

        <!-- dialog -->
        <addNode ref="addNode"></addNode>
        <editKB ref="editKB"></editKB>
    </div>
</template>


<script>
    export default {
        data() {
            return {
                headerList: [
                    { num: '第一节', time: ['08:30:22', '09:30:12'] },
                    { num: '第二节', time: ['08:30:22', '09:30:23'] },
                    { num: '第三节', time: ['11:30:22', '09:30:26'] },
                    { num: '第四节', time: ['02:30:22', '09:10:25']},
                    { num: '第五节', time: ['04:30:22', '09:30:22'] },
                    { num: '第六节', time: ['08:30:22', '09:20:60'] },
                    { num: '第七节', time: ['06:30:22', '09:30:22'] },
                    { num: '第八节', time:['06:30:22', '09:30:22'] },
                ],//表头列
                 //行
                rowList:[
                  {
                      name:'星期一',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期二',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期三',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期四',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期五',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期六',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                   {
                      name:'星期日',
                      show:false,
                      list:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4},{subName:'生物',value:4}],
                   },
                ],
                subjectList:[{subName:'语文',value:1},{subName:'数学',value:2},{subName:'外语',value:3},{subName:'生物',value:4}]
            }
        },
        methods: {
            handleAdd(){
                this.$refs.addNode.list = [...this.headerList]
                this.$refs.addNode.open()
            },
            handleEdit(item){
                // this.$refs.editKB.open()
                item.show = !item.show
            },
            handleOk(item){
                console.log(item)
            }
        },
    }

</script>


<style scoped>
table{
    border:1px solid #E6DFDF;
    border-radius: 5px;
    background: #fff;
    width: 100%;
    text-align: center;
    box-shadow: 0px 2px 2px #C7C3C3;
}
tr{
    background: #F6FCFF;
    background: linear-gradient(to right, #E3ECF7 , #FEFEFF); /* 标准的语法 */
}
tr:hover{
    background: #CEECFF;
    cursor: pointer;
}
tr td{
    border:none;
}
</style>